<template>
  <view class="components-star">
    <tn-custom :is-alpha="true">
      <block slot="left">
        <!-- #ifdef MP-WEIXIN -->
        <view class='action border-custom text-white' :style="'width:' + Custom.width + 'px;margin-left:calc(750rpx - ' + Custom.right + 'px)'"
          @click="navHome">
          <text class='cuIcon-back'></text>
          <text class='cuIcon-homefill'></text>
        </view>
        <!-- #endif -->
        <!-- #ifdef H5 -->
        <view class='action border-custom text-white' style="width: 174rpx;height: 64rpx;margin-left: 20rpx" @click="navHome">
          <text class='cuIcon-back'></text>
          <text class='cuIcon-homefill'></text>
        </view>
        <!-- #endif -->
      </block>
    </tn-custom>

    <canvas canvas-id="star_canvas" class="mycanvas" :style="'width:' + screenWidth + 'px;height:' + screenHeight + 'px;background-image:url(https://z3.ax1x.com/2021/07/06/RoKBkj.jpg)'"></canvas>
  </view>
</template>

<script>
  import Point from './static/js/Point'

  const sysinfo = uni.getSystemInfoSync()
  const w = 400
  const h = 1000

  export default {
    data() {
      return {
        Custom: this.Custom,
        CustomBar: this.CustomBar,
        ctx: null,
        screenWidth: sysinfo.screenWidth,
        screenHeight: sysinfo.screenHeight,
        timer: null,
        points: []
      }
    },
    onLoad() {
      for (let i = 0; i < 80; i++) {
        this.points.push(new Point(Math.random() * w, Math.random() * h))
      }
      this.ctx = uni.createCanvasContext('star_canvas')
      // console.log(points)

      this.gameloop() //进行
      // this.ctx.setFillStyle('red')
      // this.ctx.fillRect(200, 300, 50, 50)
      // this.ctx.draw()
    },
    onUnload() {
      clearTimeout(this.timer)
    },
    methods: {
      navHome() {
        uni.navigateBack({
          delta: 1
        })
      },
      /**粒子进行*/
      gameloop() {
        this.timer = setTimeout(this.gameloop, 100);
        // console.log('gameloop')
        this.paint();
      },
      /**清空画布*/
      paint() {
        this.ctx.clearRect(0, 0, w, h)
        for (var i = 0; i < this.points.length; i++) {
          this.points[i].move(w, h)
          this.points[i].draw(this.ctx)
          for (var j = i + 1; j < this.points.length; j++) {
            this.points[i].drawLine(this.ctx, this.points[j])
          }
        }
        this.ctx.draw();
      }
    }
  }
</script>

<style lang="scss" scoped>
  .components-star {
    background-image: linear-gradient(45deg, #ff7612, #ff571c);
    height: 100vh;
  }

  .mycanvas {
    background-size: cover;
    width: 100vw;
    height: 100vh;
    justify-content: center;
    flex-direction: column;
    color: #fff;
  }
</style>
